const addMadol = new bootstrap.Modal(document.querySelector('#addModal'), { backdrop: 'static', keyboard: false })
const addForm = document.querySelector('.add-form')
const ps = document.querySelector('[name=province]')
const cs = document.querySelector('[name=city]')
const as = document.querySelector('[name=county]')
let id
async function getStudents() {
    const res = await axios({
        url: '/student/list'
    })
    document.querySelector('tbody').innerHTML = res.data.map(item => `<tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.province + item.city + item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id="${item.id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id="${item.id}">删除</button>
        </td>
      </tr>`).join('')
}
getStudents()
document.querySelector('.btnAddStu').addEventListener('click', async () => {
    id = ''
    document.querySelector('.modal-title').innerHTML = '录入新学员'
    addForm.reset()
    addMadol.show()
    const pRes = await axios({
        url: '/geo/province'
    })
    ps.innerHTML = '<option selected="" value="">--省--</option>' + pRes.map(item => `<option  value="${item}">${item}</option>`)
})
ps.addEventListener('change', async () => {
    const cRes = await axios({
        url: '/geo/city',
        params: {
            pname: ps.value
        }
    })
    cs.innerHTML = '<option selected="" value="">--市--</option>' + cRes.map(item => `<option  value="${item}">${item}</option>`)
    as.innerHTML = '<option selected="" value="">--区/县--</option>'
})
cs.addEventListener('change', async () => {
    const aRes = await axios({
        url: '/geo/county',
        params: {
            pname: ps.value,
            cname: cs.value
        }
    })
    as.innerHTML = '<option selected="" value="">--区/县--</option>' + aRes.map(item => `<option  value="${item}">${item}</option>`)
})


document.querySelector('.btnAddStudent').addEventListener('click', async e => {
    e.preventDefault()
    const data = serialize(addForm, { hash: true, empty: true })
    let res = ''
    if (!id) {
        try {
            res = await axios({
                url: '/student/add',
                method: 'post',
                data
            })
        } catch (error) {
            Toast.fail('添加失败,内容不合规')
        }
    } else {
        data.id = id
        try {
            res = await axios({
                url: '/student/update',
                method: 'put',
                data
            })
        } catch (error) {
            Toast.fail('修改失败,内容不合规')
        }
    }
    if (res.code === 0) {
        Toast.success(res.message)
        addMadol.hide()
        getStudents()
    }
})
document.querySelector('tbody').addEventListener('click', async e => {
    if (e.target.classList.contains('btn-danger')) {
        const id = e.target.dataset.id
        const res = await axios({
            url: '/student/delete',
            method: 'delete',
            params: { id }
        })
        Toast.success(res.message)
        getStudents()
    }
})
document.querySelector('tbody').addEventListener('click', async e => {
    if (e.target.classList.contains('btn-primary')) {
        id = e.target.dataset.id
        addForm.reset()
        document.querySelector('.modal-title').innerHTML = '修改学员'
        document.querySelector('.btnAddStudent').innerHTML = '确认修改'
        addMadol.show()
        const res = await axios({
            url: '/student/one',
            params: { id }
        })
        const pRes = await axios({
            url: '/geo/province'
        })
        ps.innerHTML = '<option selected="" value="">--省--</option>' + pRes.map(item => `<option  value="${item}">${item}</option>`)
        const cRes = await axios({
            url: '/geo/city',
            params: {
                pname: res.data.province
            }
        })
        cs.innerHTML = '<option selected="" value="">--市--</option>' + cRes.map(item => `<option  value="${item}">${item}</option>`)
        const aRes = await axios({
            url: '/geo/county',
            params: {
                pname: res.data.province,
                cname: res.data.city
            }
        })
        as.innerHTML = '<option selected="" value="">--区/县--</option>' + aRes.map(item => `<option  value="${item}">${item}</option>`)
        Object.keys(res.data).forEach(k => {
            if (k === 'sex') {
                const sexs = document.querySelectorAll('[name=sex]')
                res.data[k] === '男' ? sexs[0].checked = true : sexs[1].checked = true
            } else if (document.querySelector(`[name=${k}]`)) {
                document.querySelector(`[name=${k}]`).value = res.data[k]
            }
        })

    }
})

